<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>设备维修管理系统</title>
    <meta name="keywords" content="设备维修管理">
    <meta name="description" content="设备维修管理">
    <link href="../static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;url=error/ie.html" />
    <![endif]-->
    <style type="text/css">
        /* BACKGROUND */
        body {
            background: url("../static/images/login-background.jpg") no-repeat center fixed;
        }
        /* TITLE */
        #title-panel {
            position: absolute;
            top: 13%;
            width: 100%;
            color: #fff;
            font-size: 40px;
            text-align: center;
        }
        @media (min-width: 1400px) {
            #title-panel {
                top: 15%;
                font-size: 44px;
            }
        }
        /* LOGIN BACKGROUND */
        #login-bg {
            position: absolute;
            width: 400px;
            height: 260px;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -130px;
            background-color: #fff;
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            opacity: 0.5;
            border-radius: 10px;
        }
        /* LOGIN PANEL */
        #login-panel {
            position: absolute;
            width: 400px;
            height: 260px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            padding: 50px;
            margin-left: -200px;
            margin-top: -130px;
            text-align: center;
            border-radius: 10px;
        }
        #alert-info {
            float: left;
            text-align: center;
            color: red;
        }
        #login-panel .form-group {
            margin-bottom: 20px;
        }
        #login-panel .btn-primary {
            margin-top: 40px;
            background-color: #1e8af8;
            height: 40px;
            border-radius: 20px;
            font-size: 20px;
            padding: 0;
        }
        #login-panel .btn-primary:hover {
            background-color: #337ab7;
        }
        /* FOOTER */
        #footer {
            background: transparent;
            color: #fff;
            font-size: small;
            padding: 15px 0;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }
        #footer p {
            margin: 0;
            text-align: center;
            font-size: 14px;
        }
    </style>

    <script>
        //防止被iframe调用
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>

</head>

<body>
<div id="title-panel">
    新疆立昂电信技术资产管理系统
</div>
<!-- /TITLE -->
<!-- LOGIN -->
<div id="login-bg"></div>
<div id="login-panel">
    <form id="userlogin" class="form-signin" @keyup.enter="login">
        <div class="form-group">
            <div class="input-group">
				<span class="input-group-addon">
    				<i class="fa fa-user fa-fw"></i>
  				</span>
                <input class="form-control" type="text" v-model="username" placeholder="用户名"  required autofocus />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
				<span class="input-group-addon">
    				<i class="fa fa-lock fa-fw"></i>
  				</span>
                <input class="form-control" type="password" v-model="password" placeholder="密码" required>
            </div>
        </div>
        <div id="alert-info" v-if="error">
             {{errorMsg}}
        </div>
        <button id="submit" type="button" class="btn btn-block btn-primary" @click="login">
            登录
        </button>
    </form>
</div>
<!-- /LOGIN -->
<!-- FOOTER -->
<div id="footer" class="container">
    <p>
        &copy; 2017  南京云创大数据科技股份有限公司，版权所有
    </p>
</div>
    <script src="../static/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="../static/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="../static/vue/vue.min.js"></script>
    <!--自定义js-->
    <script type="text/javascript">
        var vm = new Vue({
            el:'#userlogin',
            data:{
                username: '',
                password: '',
                captcha: '',
                error: false,
                errorMsg: ''
            },
            beforeCreate: function(){
                if(self != top){
                    top.location.href = self.location.href;
                }
            },
            methods: {
                login: function (event) {
                    if(vm.username == '') {
                        vm.error = true;
                        vm.errorMsg = '用户名不能为空';
                        return false;
                    }
                    if(vm.password == '') {
                        vm.error = true;
                        vm.errorMsg = '密码不能为空';
                        return false;
                    }
                    $.ajax({
                        type: "POST",
                        url: "../user/login",
                        data: {
                            username: vm.username,
                            password: vm.password
                        },
                        dataType: "json",
                        success: function(result){
                            //将token储存在sessionStorage中，记录登录信息
                            sessionStorage.Token=result.data;
                            if(result.code == 0){//登录成功
                                parent.location.href ='index.html';
                            }else{
                                vm.error = true;
                                vm.errorMsg = result.message;
                            }
                        }
                    });
                }
            }
        });
    </script>

</body>

</html>
